<template>
    <div class="content">

        <el-input placeholder="请输入商品名称" v-model="keyWord" style="width: 400px">
            <el-button slot="append" icon="el-icon-search" @click="selectGoods()">
            </el-button>
        </el-input>

        <el-table :data="goodsData" border style="width: 100%" stripe height="250"
            :default-sort="{ prop: 'price', order: 'descending' }">
            <el-table-column type="index">
            </el-table-column>
            <el-table-column prop="id" label="id" width="300">
            </el-table-column>
            <el-table-column prop="name" label="商品名称" width="300">
            </el-table-column>
            <el-table-column prop="price" label="商品价格" width="180" sortable>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" active-color="green" inactive-color="#ff4949" active-value="1"
                        inactive-value="0" @change="deleteGoods(scope.row.id, scope.row.status)"></el-switch>
                </template>
            </el-table-column>

            <el-table-column prop="name" label="操作" align="center" fixed="right">
                <template slot-scope="scope">
                    <!-- (scope.row.userId)用于获取当前行数据对象中的用户ID（或其他字段） -->
                    <el-button size="mini" type="text" @click="openDialog(scope.row)">编辑</el-button>
                </template>
            </el-table-column>

        </el-table>

        <div>
            <el-pagination @size-change="handleSizeChange" @prev-click="prevClick" @next-click="nextClick"
                @current-change="handleCurrentChange" background layout="total,sizes,prev, pager, next,jumper"
                :total="total" :page-sizes="[10, 20, 50, 100, 500, 2000]">
            </el-pagination>
        </div>
    </div>
</template>


<script>
export default {
    name: 'goodsList',
    data() {
        return {
            goodsData: [],
            keyWord: '',//搜素框的值
            total: 0, // 数据总数
            pageNum: 0,//当前页码
            pageSize: 10,//每页显示的条数
            // value:

        }
    },
    mounted() {
        this.selectGoods(1, 10, "");

    },
    methods: {
        deleteGoods(id, status) {
            if (id != '' && id != null) {
                this.$request.post('upload/deleteGoods', {

                    id: id,
                    status: status

                }).then((res) => {
                    this.$message({
                        message: '删除成功',
                        type: "success"
                    })
                })
            }
        },
        openDialog(row) {
            this.$router.push({ name: 'uploadFile', params: { id: row.id } });
        },

        //分页方法、当页码发生变化是被调用
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum
            this.selectGoods();
        },
        //上一页
        prevClick(pageNum) {
            this.pageNum = pageNum
            this.selectGoods();
        },
        //下一页
        nextClick(pageNum) {
            this.pageNum = pageNum
            this.selectGoods();
        },
        //当改变每页显示条数时被调用
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.selectGoods();
        },
        selectGoods() {


            this.$request.post('upload/selectGoodsList', {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                keyWord: this.keyWord,

            }).then((res) => {
                if (res.code === '200') {
                    let result = res.data;
                    this.goodsData = result.list;
                    this.total = result.total;
                }

            }).catch(error => {
                if (error.code === 'ECONNABORTED') {
                    this.$message.error('网络繁忙，请稍后重试')
                } else {
                    console.log('请求发生错误：', error.message)
                }
            })
        }
    }
}
</script>

<style>
.content {
    width: 1200px;
    margin: 20px auto;
}
</style>